Skip to content

feat: improve mobile layout for the showcase submissions#884

Merged
LadyBluenotes merged 1 commit intoTanStack:mainfrom
nikilok:fix/mobile-layout-submissions
May 2, 2026
Merged

feat: improve mobile layout for the showcase submissions#884
LadyBluenotes merged 1 commit intoTanStack:mainfrom
nikilok:fix/mobile-layout-submissions

Conversation

@nikilok
Copy link
Copy Markdown
Contributor

@nikilok nikilok commented May 2, 2026 •
edited by coderabbitai Bot
Loading

A few layout improvements for the showcase submissions on Tanstack.com for mobile.
Desktop stays the same as before.

Before After
Mobile
Desktop

Summary by CodeRabbit

  • Style
    • Enhanced showcase card responsive design with improved badge positioning and layout adaptation. Status badges now display appropriately for both mobile and desktop views, with the screenshot area and card structure restructured to adapt seamlessly across different screen sizes. The layout optimization improves visual hierarchy and user experience on all devices.

@netlify
Copy link
Copy Markdown

netlify Bot commented May 2, 2026 •
edited
Loading

✅ Deploy Preview for tanstack ready!

Name Link
🔨 Latest commit bf858e4
🔍 Latest deploy log https://app.netlify.com/projects/tanstack/deploys/69f5cd683ac037000884f01a
😎 Deploy Preview https://deploy-preview-884--tanstack.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse		 1 paths audited
Performance: 25 (🔴 down 20 from production)
Accessibility: 90 (no change from production)
Best Practices: 83 (🔴 down 9 from production)
SEO: 97 (no change from production)
PWA: 70 (no change from production)
View the detailed breakdown and full score reports
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 2, 2026 •
edited
Loading

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 97c8220d-84fc-46a1-9222-aebe6a0968e8

📥 Commits

Reviewing files that changed from the base of the PR and between 74f1b3b and bf858e4.

📒 Files selected for processing (1)
  • src/routes/account/submissions.tsx
📝 Walkthrough

Walkthrough

The showcase card UI in the submissions page was updated for responsive design. The screenshot area now uses a vertically stacked layout on mobile that transitions to horizontal on larger screens, with a mobile-only status badge overlay. The status badge in the content header was moved to display only on desktop screens.

Changes

Responsive Showcase Card Layout

Layer / File(s) Summary
Responsive Flexbox Structure
src/routes/account/submissions.tsx (lines 137–151)		 Screenshot card container changed from fixed horizontal layout to flex-col sm:flex-row, stacking vertically on mobile and horizontally on larger screens.
Status Badge Repositioning
src/routes/account/submissions.tsx (lines 137–151, 164–166)		 Mobile status badge added as absolute overlay in screenshot area with sm:hidden, and content header badge updated to hidden sm:block for desktop-only display.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A hop and a flex, cards now respire,
Mobile to desktop, layouts climb higher,
Badges dance 'cross the screens so small,
Responsive magic answers the call! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'improve mobile layout for the showcase submissions' accurately reflects the main change—responsive layout improvements for mobile submission cards. It is concise, specific, and clearly communicates the primary objective of the changeset.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
Review rate limit: 7/8 reviews remaining, refill in 7 minutes and 30 seconds.

Comment @coderabbitai help to get the list of available commands and usage tips.

@LadyBluenotes LadyBluenotes merged commit 0e91ae4 into TanStack:main May 2, 2026
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@LadyBluenotes LadyBluenotes LadyBluenotes approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@nikilok @LadyBluenotes